<template>
  <div class="awaitDetele">
    <Loading :loading="loading">
      <Form :ref="formRef" :label-width="130" :model="formOrderData" inline>
        <h3 class="title">订单信息</h3>
        <div class="formList">
          <FormItem label="子订单号:" style="width:30%">
            <div>{{formOrderData.subOrderId}}</div>
          </FormItem>
          <FormItem label="主订单号:" style="width:30%">
            <div>{{formOrderData.orderId}}</div>
          </FormItem>
          <FormItem label="商品订单下单时间:" style="width:30%">
            <div>{{formOrderData.createdDt}}</div>
          </FormItem>
          <FormItem label="支付订单号:" style="width:30%">
            <div>{{ formOrderData.order ? formOrderData.order.paymentId : '' }}</div>
          </FormItem>
          <FormItem label="渠道支付订单号:" style="width:30%">
            <div>{{ formOrderData.order ? formOrderData.order.flowId : '' }}</div>
          </FormItem>
          <FormItem label="支付订单创建时间:" style="width:30%">
            <div>{{ formOrderData.payCreateTime }}</div>
          </FormItem>
          <FormItem label="支付订单交易时间:" style="width:30%">
            <div>{{ formOrderData.payTime }}</div>
          </FormItem>
          <FormItem label="商品名称:" style="width:30%">
            <div>{{formOrderData.productName}}</div>
          </FormItem>
          <FormItem label="产品编码:" style="width:30%">
            <div>{{formOrderData.productCode}}</div>
          </FormItem>
          <FormItem label="通道费率:" style="width:30%">
            <div v-if="formOrderData.rate">{{ `${formOrderData.rate || 0}%` }}</div>
          </FormItem>
          <FormItem label="支付渠道:" style="width:30%">
            <div>{{ formOrderData.payChannel }}</div>
          </FormItem>
          <FormItem label="订单金额:" style="width:30%">
            <div>{{ formOrderData.subOrderAmount ? `${formOrderData.subOrderAmount / 100}` : '0.00' }}</div>
          </FormItem>
          <FormItem label="实付金额:" style="width:30%">
            <div>{{ formOrderData.payAmount ? `${formOrderData.payAmount / 100}` : '0.00' }}</div>
          </FormItem>
          <FormItem label="是否有优惠劵:" style="width:30%">
            <div>{{ formOrderData.isCoupon === false ? '否' : '是' }}</div>
          </FormItem>
          <FormItem label="支付方式:" style="width:30%">
            <div>{{ formOrderData.payWay }}</div>
          </FormItem>

          <div v-for="(i, ind) in formOrderData.coupons" :key="ind">
            <FormItem :label="`优惠券${ind+1}:`" style="width:30%">
              <div>{{ i.couponName }}</div>
            </FormItem>
            <FormItem label="优惠劵编码:" style="width:30%">
              <div>{{ i.couponCode }}</div>
            </FormItem>
            <FormItem label="优惠金额:" style="width:30%">
              <div>{{ i.discount ? `${i.discount / 100}` : '0.00' }}</div>
            </FormItem>
          </div>
        </div>
      </Form>

      <Form :ref="formRef" :label-width="130" :model="formMerchData" inline>
        <h3 class="title">商户信息</h3>
        <FormItem label="商户名称:" style="width:30%">
          <div>{{ formMerchData.merchantName }}</div>
        </FormItem>
        <FormItem label="商户编码:" style="width:30%">
          <div>{{ formMerchData.merchantCode }}</div>
        </FormItem>
        <FormItem label="组织机构:" style="width:30%">
          <div>{{ formMerchData.organizationName }}</div>
        </FormItem>
        <FormItem label="机构编码:" style="width:30%">
          <div>{{ formMerchData.organizationCode }}</div>
        </FormItem>
        <FormItem label="开户行:" style="width:30%">
          <div>{{ formMerchData.openingBank }}</div>
        </FormItem>
        <FormItem label="账户结算类型:" style="width:30%">
          <div>{{ formMerchData.accountTypeName }}</div>
        </FormItem>
        <FormItem label="银行账号:" style="width:30%">
          <div>{{ formMerchData.accountNo }}</div>
        </FormItem>
        <FormItem label="合同有效期:" style="width:30%">
          <div v-if="formMerchData.contractStartDate">{{ formMerchData.contractStartDate }} - {{ formMerchData.contractEndDate }}</div>
        </FormItem>
      </Form>

      <Form :ref="formRef" :label-width="130" :model="fromRuleData" inline>
        <h3 class="title">清分信息</h3>
        <FormItem label="清分规则名称:" style="width:30%">
          <div>{{ fromRuleData.ruleName }}</div>
        </FormItem>
        <FormItem label="规则类型:" style="width:30%">
          <div>{{ fromRuleData.ruleTypeCn }}</div>
        </FormItem>
        <FormItem label="结算类型:" style="width:30%">
          <div>{{ fromRuleData.settlementTypeCn }}</div>
        </FormItem>
        <FormItem label="规则编码:" style="width:30%">
          <div>{{ fromRuleData.ruleCode }}</div>
        </FormItem>
        <FormItem label="产品单价:" style="width:30%">
          <div>{{ fromRuleData.productPrice }}</div>
        </FormItem>
        <FormItem label="清分规则:" style="width:30%">
          <div>{{ fromRuleData.clearingRuleCn }}</div>
        </FormItem>
        <FormItem label="平台应收:" style="width:30%">
          <div>{{ fromRuleData.clearingRule == '1' ? `${fromRuleData.platformReceivable}%` : fromRuleData.clearingRule == '2' ? `${fromRuleData.platformReceivable / 100}` : '0.00' }}</div>
        </FormItem>
        <FormItem label="商户应收:" style="width:30%">
          <div>{{ fromRuleData.clearingRule == '1' ? `${fromRuleData.merchantReceivable}%` : fromRuleData.clearingRule == '2' ? `${fromRuleData.merchantReceivable / 100}` : '0.00' }}</div>
        </FormItem>
        <FormItem label="规则优先级:" style="width:30%">
          <div>{{ fromRuleData.priorityLevel }}</div>
        </FormItem>
        <FormItem label="规则生效日期:" style="width:30%">
          <div>{{ fromRuleData.effectiveDate }}</div>
        </FormItem>
        <FormItem label="规则失效日期:" style="width:30%">
          <div>{{ fromRuleData.expireDate }}</div>
        </FormItem>
        <FormItem label="清分周期:" style="width:30%">
          <div v-if="fromRuleData.clearingCycleMode === '1'">T + {{ fromRuleData.clearingCycleValue }}</div>
          <div v-if="fromRuleData.clearingCycleMode === '2'">{{ fromRuleData.clearingCycleValue }}日/{{ fromRuleData.clearingCycleValueExt }}个月</div>
        </FormItem>
        <FormItem label="订单核销时间:" style="width:30%">
          <div>{{ fromRuleData.verifiedTime }}</div>
        </FormItem>
        <FormItem label="应清算日期:" style="width:30%">
          <div>{{ fromRuleData.shouldClearDate }}</div>
        </FormItem>
      </Form>

      <h3>平台清分流水信息</h3>
      <Table class="table" border :columns="columns" :data="formBillResuleData"></Table>
      <Button type="primary" @click="goBack" style="margin-bottom: 10px">返回</Button>
    </Loading>
  </div>
</template>
<script>
import config from "@/utils/config";
import { namespace } from "../Module/awaitaBillAbnormalModule";
import {
  InputNumber,
  Input,
  Button,
  Select,
  Form,
  FormItem,
  Message,
  Option,
  Tag,
  Table
} from "view-design";
import Loading from "@/components/Loading";
import RemoteSelect from "@/components/RemoteSelect";
import RemoteTableSelect from "@/components/RemoteTableSelect";
import SearchBar from "@/components/SearchBar";
import Uuid from "uuid";
import Authc from "@/components/Authc";
import util from '@/utils/util';

export default {
  components: {
    InputNumber,
    Loading,
    Input,
    Button,
    Form,
    FormItem,
    Message,
    RemoteSelect,
    RemoteTableSelect,
    SearchBar,
    SearchBarItem: SearchBar.SearchBarItem,
    Select,
    Option,
    Authc,
    Tag,
    Table
  },
  props: ["id"],
  beforeMount: async function() {
    let id = this.$route.query.id;
    let res = await this.$store.dispatch(`${namespace}/getDetail`, id);
    if (res.ret === 0) {
      let data = res.data;
      this.formOrderData = data.orderRes || {};
      this.formMerchData = data.merchantRes || {};
      this.fromRuleData = data.settlementRuleRes || {};
      this.formBillResuleData = data.platformBillRes || [];
    }
  },
  data() {
    return {
      formRef: Uuid.v1(),
      formOrderData: {}, // 订单信息
      formMerchData: {}, // 商户信息
      fromRuleData: {}, // 清分信息
      formBillResuleData: [], // 平台清分流水

      columns: [
        {
          title: "费用类型",
          align: "center",
          key: "costTypeCn",
          minWidth: 150
        },
        {
          title: "应清分日期",
          align: "center",
          key: "shouldClearDate",
          minWidth: 180
        },
        {
          title: "商户号",
          align: "center",
          key: "merchantCode",
          minWidth: 220
        },
        {
          title: "清分金额(元)",
          align: "center",
          key: "clearAmount",
          minWidth: 150,
          render: (h, params) => {
            return h('span', util.toMoney(params.row.clearAmount / 100))
          },
        },
        {
          title: "付款账户名",
          align: "center",
          key: "payAcctName",
          minWidth: 220
        },
        {
          title: "付款账号",
          align: "center",
          key: "payAcct",
          minWidth: 180
        },
        {
          title: "收款账户名",
          align: "center",
          key: "colAcctName",
          minWidth: 220
        },
        {
          title: "收款账号",
          align: "center",
          key: "colAcct",
          minWidth: 180
        },
        {
          title: "状态",
          align: "center",
          key: "billStatusCn",
          minWidth: 150
        }
      ]
    };
  },
  created() {},
  methods: {
    goBack() {
      this.$router.push("awaitBill");
    }
  },
  computed: {
    loading: function() {
      let result = this.$store.state[namespace].loading;
      return result;
    }
  },
  filters: {
        moneyNUm (num) {
            if (num == 0 || !num) {
                return '0.00';
            } else {
                console.log(num, '44')
                num = parseFloat(num / 100);
                num = num.toFixed(2);
                num = num.toLocaleString();
                if (num.indexOf('.') < 0) {
                num = num + '.00';
                }
                return num;
            }
        }
    }
};
</script>

<style lang="less">
.awaitDetele {
  .title {
    border-bottom: 1px solid #999;
    padding-bottom: 6px;
  }
  .table {
    margin: 20px 0;
  }
}
</style>
